<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<!-- <view class="back iconfont icon-xiangzuo1" @tap="backPage"></view> -->
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">首页</view>
		</view>
		<view class="bg_box">
			
			<!-- <image class="bg01" src="../../static/bg01.png" mode="widthFix"></image> -->
			<view class="bg_content">
				<view class="banner_box">
					<swiper next-margin="-1px" :circular="true" :current="currentIndex" :autoplay="true"
						:interval="3000" :duration="200" indicator-dots="false" indicator-color="rgba(255, 255, 255, .1)"
						indicator-active-color="#FFFFFF" @change="bannerChange">
						<block v-for="(item, index) in imgdata" :key="index">
							<swiper-item style="height: 100%;" :data-url="item.url" @click="gotopage">
								<view class="swiper-item" style="height: 100%;">
									<image :src="item.image" mode="scaleToFill"></image>
								</view>
							</swiper-item>
						</block>
					</swiper>
				</view>
				<view class="swiper_box02">
					<view class="notice">
						<view class="icon_box">
							<view class="icon iconfont icon-gonggao"></view>
						</view>
						<swiper class="swiper_box03" :autoplay="true" :interval="3000" :duration="1000" vertical="true">
							<block v-for="(item, index) in nesData" :key="index">
								<swiper-item style="height: 100%;"
									:data-url="'/pages/index/notice?id=' + item.id + '&title=' + item.title"
									@click="gotopage">
									<view class="content_text">{{ item.title }}</view>
								</swiper-item>
							</block>
						</swiper>
						<!-- <view class="more iconfont" data-url="/pages/personage/notice" @click="gotopage">&#xe60e;</view> -->
					</view>
				</view>
				
				<view class="nav">
					<block v-for="(item, index) in menus02" :key="'menus02' + index">
						<view class="menu" :data-url="item.url" @click="gotopage">
							<image :src="item.img" mode="widthFix"></image>
							<view class="text">{{ item.text }}</view>
						</view>
					</block>
				</view>

				<view class="nav">
					<block v-for="(item, index) in menus" :key="'menus' + index">
						<view class="menu" :data-url="item.url" @click="gotopage">
							<image :src="getImgSrc(item.img)" mode="widthFix"></image>
							<view class="text">{{ item.text }}</view>
						</view>
					</block>
				</view>
				
				<view class="page_title">
					<view class="title">推荐系统</view>
					<!-- <view class="arrow iconfont icon-xiangyou1"></view> -->
				</view>

				<view class="goods_box">
					<view class="goods" v-for="(item, index) in system" :data-url="'/pages/goods/goods?id='+item.id" @click="gotopage">
						<image :src="item.logo" mode="widthFix"></image>
					</view>
				</view>

				<view class="clear_box"></view>
			</view>
		</view>
		
		<!-- 弹窗 -->
		<view class="pupu_box" @tap="closePupu" v-if="pupu">
			<view class="pupu_show" @tap.stop="">
				<!-- <view class="pupu_title">恭喜您获得优惠劵</view> -->
				<!-- <view class="close iconfont icon-guanbi1" @tap="closePupu"></view> -->
				<view class="pupu_coupon">
					<image :src="coupon_img" mode="widthFix"></image>
				</view>
				<view class="pupu_menu" @click="receive(coupon_id)">领取</view>
			</view>
		</view>
		
		<view class="kefu_box" @tap="colseKefu" v-if="kefu_show">
			<view class="kefu_show" @tap.stop="">
				<view class="kefu_coupon">
					<view class="kefu_title">客服微信号：</view>
					<view class="kefu_title">{{wechat}}</view>
					<!-- <view class="pupu_title" @click="copyText()">复制客服微信号</view> -->
					<view class="copy" @click="copyText()" style="margin-bottom: 10rpx;">复制客服微信号</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pupu:false,
				currentIndex: 0,
				page: 1,
				scrrol: false,
				info: '',
				system:[],
				pid:0,
				coupon_id:0,
				wechat:'',
				kefu_show:false,
				coupon_img:this.getImgSrc('/static/bg04.png'),
				imgdata: [
					{
						image:'/static/banner01.png'
					},
					{
						image:'/static/banner02.png'
					},
					{
						image:'/static/banner03.png'
					}
				],
				nesData: [{
						title: '欢迎进入短视频b2c系统，于今日正式上线公测 ！'
					},
					{
						title: '欢迎进入短视频b2c系统，于今日正式上线公测 ！'
					},
					{
						title: '欢迎进入短视频b2c系统，于今日正式上线公测 ！'
					},
				],
				menus02: [{
						img: '/static/menu/menu01.png',
						text: '关于我们',
						url: '/pages/personalcenter/settings/us'
					},
					{
						img: '/static/menu/menu02.png',
						text: '系统介绍',
						url: '/pages/index/system'
					},
					{
						img: '/static/menu/menu03.png',
						text: '在线客服',
						url: '/pages/personalcenter/contact'
					},
					{
						img: '/static/menu/menu04.png',
						text: '分享海报',
						url: '/pages/personalcenter/share'
					},
					// {
					// 	img: '/static/menu/menu06.png',
					// 	text: '热门系统',
					// 	url: '/pages/index/list?title=热门系统&type=0'
					// },
					// {
					// 	img: '/static/menu/menu07.png',
					// 	text: '电商系统',
					// 	url: '/pages/index/list?title=电商系统&type=1'
					// },
					// {
					// 	img: '/static/menu/menu08.png',
					// 	text: 'ERP系统',
					// 	url: '/pages/index/list?title=ERP系统&type=2'
					// },
					// {
					// 	img: '/static/menu/menu09.png',
					// 	text: 'CRM系统',
					// 	url: '/pages/index/list?title=CRM系统&type=3'
					// },
				],
			}
		},
		onLoad(e) {
			let that = this;
			that.loadData();
			var scene = decodeURIComponent(e.scene);
			if (scene && scene != 'undefined') {
				that.pid = scene;
				uni.setStorageSync('pid', that.pid);
			}
			if (e.invite_id && e.invite_id != 'undefined' && e.invite_id != null){
				that.pid = e.invite_id;
				uni.setStorageSync('pid', that.pid);
			}
			if (e.coupon_id){
				that.pupu = !that.pupu;
				that.coupon_id = e.coupon_id;
				uni.setStorageSync('coupon_id', e.coupon_id);
			}else{
				let s_coupon_id = uni.getStorageSync('coupon_id');
				if (s_coupon_id){
					that.pupu = !that.pupu;
					that.coupon_id = s_coupon_id;
				}
			}
			wx.showShareMenu({
				withShareTicket:true,
				menus:['shareAppMessage','shareTimeline']
			})
		},
		methods: {
			closePupu(){
				let that = this;
				that.pupu = !that.pupu;
			},
			bannerChange(e) {
				let that = this;
				// console.log(e)
				that.currentIndex = e.target.current;
			},
			loadData() {
				let that = this;
				that.Net._get('index/home', {}, res => {
					if (res.code == 200) {
						// that.imgdata = res.data.banner;
						that.nesData = res.data.notice;
						that.system = res.data.goods;
						that.coupon_img = res.data.coupon_img;
						that.wechat = res.data.wechat;
					}
				});
			},
			copyText(){
				uni.setClipboardData({
				    data: this.wechat,
				    success: function () {
				        uni.showToast({
							title: '复制成功',
							icon: 'success',
				            duration: 2000
				        });
				    }
				});
			},
			receive(e){
				let that = this;
				that.Net._post('auth/coupon/receive', {coupon_id:that.coupon_id}, res => {
					if (res.code == 200) {
						uni.removeStorageSync('coupon_id');
						that.pupu = !that.pupu;
						that.Msg.Success('领取成功', res => {
							uni.navigateTo({
								url: '/pages/coupon/coupon'
							});
						});
					}
				});
			},
			customerService(){
				let that = this;
				wx.openCustomerServiceChat({
					extInfo: {url: 'https://work.weixin.qq.com/kfid/kfc500fbb46e9f01aae'},
					corpId: 'ww9954cede62d4ff9a',
					success(res) {
						console.log(res)
					}
				})
			},
			colseKefu(f){
				this.kefu_show = !this.kefu_show;
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {
			// var that = this;
			// that.page++;
			// that.Net._get('', {
			// 	per_page: '10',
			// 	page: that.page,
			// }, res => {
			// 	if (res.code == 200) {
			// 		//console.log(res)
			// 		if (res.data.data == '') {
			// 			uni.showToast({
			// 				title: '已经是最后一页了',
			// 				duration: 2000,
			// 				icon: 'none'
			// 			});
			// 		} else {
			// 			that.info = that.info.concat(res.data.data); //将数据拼接在一起
			// 		}
			// 	} else if (res.code == 0) {
			// 		that.Msg.Success(res.msg, res => {});
			// 	}
			// });
		},
	}
</script>

<style>
	/* .header {
		background-color: transparent;
	}

	.header .text {
		background-color: transparent;
	} */

	.scrrolHeader {
		background-color: #FF7701 !important;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(17.5vw + var(--status-bar-height));
		z-index: 98;
	}
	
	.banner_box {
		width: 100%;
		height: 40vw;
		margin: 0 auto;
	}
	
	.banner_box swiper {
		width: 100%;
		height: 100%;
	}
	
	.banner_box swiper image {
		width: 100%;
		height: 100%;
	}

	.swiper_box02 {
		width: 100%;
		height: 12vw;
		margin: 0 auto 4%;
		position: relative;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 3vw;
		box-sizing: border-box;
		margin-top: calc(4vw);
	}

	.swiper_box02 .more {
		font-size: 4vw;
		color: #333;
		height: 100%;
		width: 13vw;
		display: flex;
		align-items: center;
		justify-content: center;

	}

	.swiper_box03 {
		width: 80%;
		height: 10.5vw;
	}

	.swiper_box02 .notice {
		width: 100%;
		height: 12vw;
		display: flex;
	}

	.swiper_box02 .notice .icon_box {
		display: flex;
		justify-content: center;
		margin-left: 4%;
		margin-right: 2vw;
	}

	.swiper_box02 .notice .icon_box .icon {
		font-size: 6vw;
		color: #FF7701;
		line-height: 12vw;
		margin-right: 1vw;
	}

	.swiper_box02 .notice .icon_box .text {
		font-size: 4vw;
		color: #fff;
		line-height: 10.5vw;
		font-weight: bold;
	}

	.swiper_box02 .notice .content_text {
		font-size: 3.5vw;
		color: #333333;
		line-height: 12vw;
		flex: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.nav {
		width: 100%;
		margin: 0 auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 3vw;
		padding: 5vw 4vw 0 4vw;

	}

	.nav::after {
		flex: auto;
		content: '';
	}

	.nav .menu {
		width: 25%;
		flex-basis: auto;
		margin-bottom: 5vw;
	}

	.nav .menu image {
		width: 14vw !important;
		margin: 0 auto;
	}

	.nav .menu .text {
		width: 100%;
		text-align: center;
		font-size: 3.5vw;
		color: #333;
		margin-top: 2vw;
	}

	.goods_box {
		width: 100%;
		margin-top: 4%;
	}

	.goods_box .goods {
		width: 100%;
		margin-bottom: 4%;
	}

	.goods_box .goods image {
		width: 100%;
	}
	
	.page_title{
		width: 100%;
		margin-top: 4%;
		display: flex;
		align-items: center;
	}
	
	.page_title .title{
		font-size: 4.5vw;
		color: #333;
		font-weight: bold;
		flex: 1;
	}
	
	.page_title .arrow{
		font-size: 4vw;
		color: #999;
	}
	
	.pupu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999999999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.pupu_box .pupu_show {
		width: 76%;
/* 		background-color: #fff; */
		/* border-radius: 4vw; */
		/* padding: 5vw 4vw; */
		position: relative;
	}
	
	.pupu_box .pupu_show .pupu_title{
		font-size: 4.5vw;
		color: #333;
		text-align: center;
		font-weight: bold;
		padding-bottom: 5vw;
	}
	
	.pupu_box .pupu_show .close{
		font-size: 4vw;
		color: #333;
		text-align: center;
		position: absolute;
		right: 5vw;
		top: 5vw;
	}
	
	.pupu_box .pupu_show .pupu_coupon{
		width: 100%;
	}
	
	.pupu_box .pupu_show .pupu_coupon image{
		width: 100%;
	}
	
	.pupu_box .pupu_show .pupu_menu{
		width: 100%;
		height: 13vw;
		border-radius: 13vw;
		line-height: 13vw;
		text-align: center;
		background-color: #FF7701;
		color: #fff;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 4vw;
		font-weight: bold;
	}
	
	.kefu_box {
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.7);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 9999999999;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		
	.kefu_box .kefu_show {
		width: 76%;
	/* 	background-color: #fff; */
		/* border-radius: 4vw; */
		/* padding: 5vw 4vw; */
		position: relative;
	}
		
	.kefu_box .kefu_show .kefu_title{
		font-size: 4.5vw;
		color: #333;
		text-align: center;
		font-weight: bold;
		padding-bottom: 5vw;
	}
	.kefu_box .kefu_show .copy{
		width: 34%;
		margin-left: 63%;
		border-radius: 15rpx;
		line-height: 7vw;
		height: 7vw;
		text-align: center;
		background: #FF7F22;
		color: #ffffff;
		font-size: 3.5vw;
		padding-bottom: 5vw;
	}
	.kefu_box .kefu_show .close{
		font-size: 4vw;
		color: #333;
		text-align: center;
		position: absolute;
		right: 5vw;
		top: 5vw;
	}
		
	.kefu_box .kefu_show .kefu_coupon{
		height: 30vw;
		background: #fff;
		border-radius: 3vw;
	}
		
	.kefu_box .kefu_show .kefu_coupon image{
		width: 100%;
	}
		
	.kefu_box .kefu_show .kefu_menu{
		width: 100%;
		height: 13vw;
		border-radius: 13vw;
		line-height: 13vw;
		text-align: center;
		background-color: #FF7701;
		color: #fff;
		font-size: 4vw;
		margin: 0 auto;
		margin-top: 4vw;
		font-weight: bold;
	}
</style>